<template>
	<div>
		<a-form layout="vertical">
			<a-collapse default-active-key="-1" :bordered="false">
				<template #expandIcon="props">
                    <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
				</template>
				<a-collapse-panel key="1" :header="i18n('componentStyle.columnTitle','栏目标题')">
                    <template #extra >
                        <span class="checkbox-slot" @click.stop="">
                            <a-switch v-model:checked="config.showTitle" size="small"  ></a-switch>
                        </span>
                    </template>
					<a-form-item :label="i18n('componentStyle.title','标题')">
						<a-input :placeholder="i18n('componentStyle.inputTitle','请输入标题')" v-model:value="config.title"/>
					</a-form-item>
					<a-form-item :label="i18n('componentStyle.copy','复制')+'Key'">
						<a @click="copyKey(config.key)">{{config.key}}</a>
					</a-form-item>
					<a-form-item :label="i18n('componentStyle.borderType','标题边框类型')">
						<upload-common  :globalConfig="conf.titleStyle" @uploadCommon="uploadCommonTitle"></upload-common>
					</a-form-item>
					<div class="componentStyle-flog">
						<div class="componentStyle-flog-common">
							<a-form-item :label="i18n('componentStyle.fontSize','字体大小')">
								<a-input-number style="width: 100%" v-model:value="config.titleStyle.fontSize" :min="12"/>
							</a-form-item>
						</div>
						<div class="componentStyle-flog-common">
							<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
                                <rx-color-picker v-model:value="config.titleStyle.titleColor" :placeholder="i18n('componentStyle.fontColor','字体颜色')" ></rx-color-picker>
							</a-form-item>
						</div>
					</div>
					<div class="componentStyle-flog">
						<div class="componentStyle-flog-common">
							<a-form-item :label="i18n('componentStyle.fontThickness','字体粗细')">
								<a-select default-value="no" v-model:value="config.titleStyle.fontWeight" style="width: 100%">
									<a-select-option value="bold">
										{{i18n('componentStyle.bold','加粗')}}
									</a-select-option>
									<a-select-option value="normal">
										{{i18n('componentStyle.normal','正常')}}
									</a-select-option>
								</a-select>
							</a-form-item>
						</div>
						<div class="componentStyle-flog-common">
							<a-form-item :label="i18n('componentStyle.alignmentMode','对齐方式')">
								<div class="componentStyle-textAlign">
									<div class="componentStyle-textAlign-icon" @click="config.titleStyle.textAlign='left'" :class="[config.titleStyle.textAlign=='left'?'componentStyle-textAlign-hover':'']"><rx-icon-show icon="icon-linezuoduiqi2"/></div>
									<div class="componentStyle-textAlign-icon" @click="config.titleStyle.textAlign='center'" :class="[config.titleStyle.textAlign=='center'?'componentStyle-textAlign-hover':'']"> <rx-icon-show icon="icon-linejuzhongduiqi2"/></div>
									<div class="componentStyle-textAlign-icon" @click="config.titleStyle.textAlign='right'" :class="[config.titleStyle.textAlign=='right'?'componentStyle-textAlign-hover':'']"> <rx-icon-show icon="icon-lineyouduiqi2"/></div>
								</div>
							</a-form-item>
						</div>
					</div>
				</a-collapse-panel>
				<a-collapse-panel v-if="component.zIndex" key="2" :header="i18n('componentStyle.hierarchy','层级')+ '('+component.zIndex+')'">
					<div class="zIndex-icon">
						<rx-icon-show size="20px" @click="component.zIndex=99" icon="icon-fillzhiyudingceng" :title="i18n('componentStyle.top','置顶')"></rx-icon-show>
						<rx-icon-show size="20px" @click="component.zIndex=1" icon="icon-fillzhiyudiceng" :title="i18n('componentStyle.bottom','置底')"></rx-icon-show>
						<rx-icon-show size="20px" @click="component.zIndex++" icon="icon-fillshangyiceng" :title="i18n('componentStyle.upperFloor','上一层')"></rx-icon-show>
						<rx-icon-show size="20px" @click="component.zIndex--" icon="icon-fillxiayiceng" :title="i18n('componentStyle.nextLayer','下一层')"></rx-icon-show>
					</div>
				</a-collapse-panel>
				<a-collapse-panel key="3" :header="i18n('componentStyle.background','背景')">
					<a-form-item :label="i18n('componentStyle.columnBorderType','栏目边框类型')">
						<upload-common :globalConfig="conf.styles" @uploadCommon="uploadCommon"></upload-common>
					</a-form-item>
				</a-collapse-panel>
			</a-collapse>
		</a-form>
	</div>
</template>

<script>
/**
 * 组件风格配置
 */
import UploadCommon from "./upload-common.vue"
import {RxColorPicker} from "@lowcode/jpaas-base-lib";
export default {
	name: "componentStyle",
	inject:{
		config:{
			default:()=>{
				return {};
			}
		}
	},
	props:['curComponent'],
	components:{
        UploadCommon,
        RxColorPicker
	},
	data() {
		return {
			conf:{
				styles:{
					mode:"border",
				},
				titleStyle:{
					mode:"title",
					fontSize:12
				}
			},
			component:this.curComponent
		}
	},
	created() {
		this.conf.styles=Object.assign(this.conf.styles,this.config.styles);
		this.conf.titleStyle=Object.assign(this.conf.titleStyle,this.config.titleStyle);
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		designLangI18n(name,text,key){
			return this.$ti18(name,text,"designLang",key);
		},
		uploadCommon(globalConfig){
			this.config.styles = Object.assign(this.config.styles,globalConfig);
		},
		uploadCommonTitle(globalConfig){
			this.config.titleStyle = Object.assign(this.config.titleStyle,globalConfig);
		},
		copyKey(key){
			let tag = document.createElement('input');
			tag.setAttribute('id', 'copyInput');
			tag.value = key;
			document.getElementsByTagName('body')[0].appendChild(tag);
			document.getElementById('copyInput').select();
			document.execCommand('copy');
			document.getElementById('copyInput').remove();
			this.$message.success(this.designLangI18n('msa.copyTips','复制成功!'));
		}
	},
	watch: {}
}
</script>

<style scoped lang="less">
.componentStyle-flog{
	display: flex;
}
.componentStyle-flog-common{
	flex: 1;
}
.componentStyle-flog-common:nth-child(1){
	margin-right: 20px;
}
.componentStyle-textAlign{
	display: flex;
	height: 31px;
	border-radius: 4px;
	border: solid 1px #dedede;
	align-items: center;
	justify-items: center;
}
.componentStyle-textAlign-icon{
	flex: 1;
	height: 31px;
	font-size: 20px;
	text-align: center;
	cursor: pointer;
	border-right: solid 1px #dedede
}
.componentStyle-textAlign-hover{
	color: #4285f4;
}
.componentStyle-textAlign-icon:hover{
	color:#4285f4;
}
.componentStyle-textAlign-icon:nth-child(3){
	border: none;
}
.zIndex-icon span{
	cursor: pointer;
	margin-right: 10px;
	margin-bottom: 10px;
}
.zIndex-icon span:hover{
	color: #0daaf6;
}
</style>
